<script setup lang=ts>
// import { listUnit } from '@fl/api/contract/baseproject/unit'
// import { getHouseListByUnitId } from '@fl/api/contract/yangbenhetong/house'
import { allList } from '@fl/api/guest/base'
// import { getbuildingList } from '@fl/api/home/home'
import { listBase } from '@fl/api/order/base'
import { useStoreDict } from '@fl/store/modules/goodHouseDict'
import { formatToDateTime } from '@fl/utils/dateUtil'

import DictTag from '../components/DictTag/index.vue'
import Pagination from '../components/Pagination/index.vue'
import orderDialog from '../details.vue'
import peopleDialog from '../people.vue'
import trialDialog from './trialDialog.vue'

const dictStore = useStoreDict()
dictStore.init(['order_ddzt', 'order_zffs', 'order_shzt'])
const { getDicts } = storeToRefs(dictStore)

const queryRef = ref()
const ky_lp = ref<any[]>([])
// const buildingList = ref([]) // 楼栋下拉数据
// const unitList = ref([]) // 单元下拉数据
// const houseList = ref([]) // 房间号下拉
const baseList = ref<any[]>([])
const loading = ref<boolean>(true)
const showSearch = ref<boolean>(true)
const ids = ref<any[]>([])
const single = ref<boolean>(true)
const multiple = ref<boolean>(true)
const total = ref<number>(0)
const orderDetailsDialogVisible = ref<boolean>(false)
const recheckVisible = ref<boolean>(false)
const peopleDialogVisible = ref<boolean>(false)
const houseCustomId = ref<string>('')
const defaultTime: [Date, Date] = [
    new Date(2000, 1, 1, 0, 0, 0),
    new Date(2000, 2, 1, 23, 59, 59),
]
const data = reactive<any>({
    form: {},
    orderDetailsForm: {},
    queryParams: {
        createTime: undefined,
        // houseId: "", //房号id
        orderNumber: undefined,
        pageNum: 1,
        // buildingId: "", //楼栋id
        // unitId: "", //单元id
        pageSize: 10,
        projectBaseId: '',
        status: undefined,
        userCode: undefined,
    },
    rules: {
        orderNumber: [
            { message: '订单编号不能为空', required: true, trigger: 'blur' },
        ],
        userCode: [
            { message: '用户编号不能为空', required: true, trigger: 'blur' },
        ],
    },
})

const { _form, _rules, orderDetailsForm, queryParams } = toRefs(data)

// 楼盘名称修改
// function changeProject(e) {
//     // buildingList.value = [];
//     // unitList.value = [];
//     // houseList.value = [];
//     // queryParams.value.buildingId = "";
//     // queryParams.value.unitId = "";
//     // queryParams.value.houseId = "";
//     // if (!e) return;
//   		// getbuildingSelet(e);
// }

// 获取楼栋下拉
// async function getbuildingSelet(e) {
//     const queryParam = {
//         pageNum: 1,
//         pageSize: 10000,
//         productType: queryParams.value.productType,
//         projectId: e,
//     }
//     const res = await getbuildingList(queryParam)
//     if (res.code == 200) {
//         buildingList.value = res.rows
//     }
// }
// 获取单元下拉
// async function getlistUnit(e) {
//     const queryParams = {
//         buildingId: e,
//         pageNum: 1,
//         pageSize: 10000,
//     }
//     const res = await listUnit(queryParams)
//     if (res.code == 200) {
//         unitList.value = res.rows
//     }
// }
// function changeUnitName(e) {
//     unitList.value = []
//     houseList.value = []
//     queryParams.value.unitId = ''
//     queryParams.value.houseId = ''
//     if (!e)
//         return
//     getlistUnit(e)
// }
// function changehouseName(e) {
//     houseList.value = []
//     queryParams.value.houseId = ''
//     if (!e)
//         return
//     gethouseList(e)
// }
// 获取房号下拉列表
// async function gethouseList(e) {
//     const queryParams = {
//         pageNum: 1,
//         pageSize: 10000,
//         unitId: e,
//     }
//     const res = await getHouseListByUnitId(queryParams)
//     if (res.code == 200) {
//         houseList.value = res.data
//     }
// }

// 显示用户详情
function openPeopleDetail(row) {
    houseCustomId.value = row.houseCustomId
    peopleDialogVisible.value = true
}

// 关闭peopleDialog
function peopleDialogHandleClose() {
    peopleDialogVisible.value = false
}

// 打开一审弹窗
function openRecheck(row) {
    orderDetailsForm.value = row
    recheckVisible.value = true
}
// 关闭一审弹窗
function trialDialogHandleClose(_params) {
    recheckVisible.value = false
    getList()
}

/** 查询订单列表 */
function getList() {
    loading.value = true
    const form = { ...queryParams.value }
    form.timeStart = queryParams.value.createTime == null ? '' : formatToDateTime(queryParams.value.createTime[0].toString())
    form.timeEnd = queryParams.value.createTime == null ? '' : formatToDateTime(queryParams.value.createTime[1].toString())
    form.stateType = '2'
    delete form.createTime
    listBase(form).then((response) => {
        baseList.value = response.rows
        total.value = response.total
        loading.value = false
    })
}

// 意向楼盘列表
function getAllList() {
    allList().then((response) => {
        ky_lp.value = (response.data || []).map((r) => {
            return { label: r.xsmc, value: r.id }
        })
    })
}

function changeTime() {
}

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1
    getList()
}

/** 重置按钮操作 */
function resetQuery() {
    queryRef.value?.resetFields()
    handleQuery()
}

// 多选框选中数据
function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.id)
    single.value = selection.length !== 1
    multiple.value = !selection.length
}

// 查看订单按钮(弹框)
function openOrderDetailsDialog(row) {
    orderDetailsForm.value = row
    orderDetailsDialogVisible.value = true
}

// 关闭dialog
function orderDetailsDialogHandleClose() {
    orderDetailsDialogVisible.value = false
    getList()
}

getAllList()
getList()
</script>

<template>
    <div class="app-container">
        <el-form v-show="showSearch"
                 ref="queryRef"
                 :model="queryParams"
                 :inline="true"
                 label-width=""
        >
            <el-form-item label="订单编号"
                          prop="orderNumber"
            >
                <el-input v-model="queryParams.orderNumber"
                          placeholder="请输入订单编号"
                          clearable
                          @keyup.enter="handleQuery"
                />
            </el-form-item>

            <el-form-item label="客户名称"
                          prop="userName"
            >
                <el-input v-model="queryParams.userName"
                          placeholder="请输入客户名称"
                          clearable
                          @keyup.enter="handleQuery"
                />
            </el-form-item>

            <el-form-item label="提交时间"
                          prop="createTime"
                          style="width: 40%;"
            >
                <el-date-picker v-model="queryParams.createTime"
                                type="datetimerange"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                :default-time="defaultTime"
                                @change="changeTime"
                />
            </el-form-item>

            <el-form-item label="所属项目"
                          prop="projectBaseId"
            >
                <el-select v-model="queryParams.projectBaseId"

                           placeholder="请选择所属项目"
                           clearable
                           filterable
                           style="width: 100%;"
                           :teleported="false"
                >
                    <el-option v-for="dict in ky_lp"
                               :key="dict.value"
                               :label="dict.label"
                               :value="dict.value"
                    />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary"
                           icon="Search"
                           @click="handleQuery"
                >
                    搜索
                </el-button>

                <el-button icon="Refresh"
                           @click="resetQuery"
                >
                    重置
                </el-button>
            </el-form-item>
        </el-form>

        <el-table v-loading="loading"
                  :data="baseList"
                  border
                  @selection-change="handleSelectionChange"
        >
            <el-table-column label="序号"
                             type="index"
                             width="55"
                             align="center"
            />

            <el-table-column label="订单编号"
                             width="180"
                             align="left"
                             prop="orderNumber"
                             show-overflow-tooltip
            />

            <el-table-column label="提交时间"
                             width="170"
                             align="left"
                             sortable
                             prop="createTime"
            />

            <el-table-column label="客户名称"
                             width="120"
                             align="left"
                             :show-overflow-tooltip="true"
                             prop="userName"
            >
                <template #default="scope">
                    <el-button type="primary"
                               link
                               @click="openPeopleDetail(scope.row)"
                    >
                        {{ scope.row.userName }}
                    </el-button>
                </template>
            </el-table-column>

            <el-table-column label="联系方式"
                             width="120"
                             align="left"
                             prop="customPhone"
            />

            <el-table-column label="诚意金"
                             width="120"
                             align="right"
                             prop="deposit"
            >
                <template #default="scope">
                    {{ `${scope.row.deposit.toLocaleString()}元` }}
                </template>
            </el-table-column>

            <el-table-column label="支付方式"
                             align="left"
                             prop="paymentMethod"
                             width="90"
            >
                <template #default="scope">
                    <DictTag :options="getDicts.order_zffs"
                             :value="scope.row.paymentMethod"
                    />
                </template>
            </el-table-column>

            <el-table-column label="房源地址"
                             align="left"
                             prop="fyxx"
                             show-overflow-tooltip
                             min-width="280"
            />

            <el-table-column label="订单状态"
                             width="110"
                             align="left"
                             prop="status"
            >
                <template #default="scope">
                    <DictTag :options="getDicts.order_ddzt"
                             :value="scope.row.status"
                    />
                </template>
            </el-table-column>

            <el-table-column label="订单初审"
                             align="left"
                             prop="shzt"
            >
                <template #default="scope">
                    <DictTag :options="getDicts.order_shzt"
                             :value="scope.row.shzt"
                    />
                </template>
            </el-table-column>

            <el-table-column label="订单复审"
                             align="left"
                             prop="eszt"
            >
                <template #default="scope">
                    <DictTag :options="getDicts.order_shzt"
                             :value="scope.row.eszt"
                    />
                </template>
            </el-table-column>

            <el-table-column label="操作"
                             fixed="right"
                             width="110"
                             align="left"
                             class-name="small-padding fixed-width"
            >
                <template #default="scope">
                    <el-text class="mx-1"
                             type="primary"
                             v-hasPermi="['order:base:query']"
                             @click="openOrderDetailsDialog(scope.row)"
                    >
                        查看
                    </el-text>

                    <span style="margin: 0px 6px; color: #e4e7ed" v-hasPermi="['order:base:editEs']">|</span>
                    <el-text class="mx-1"
                             type="primary"
                             v-hasPermi="['order:base:editEs']"
                             @click="openRecheck(scope.row)"
                    >
                        复审
                    </el-text>
                </template>
            </el-table-column>
        </el-table>

        <Pagination v-show="total > 0"
                    v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize"
                    :total="total"
                    @pagination="getList"
        />
    </div>

    <!-- 用户详情 -->
    <el-dialog v-model="peopleDialogVisible"
               width="50%"
               append-to-body
               destroy-on-close
    >
        <template #header>
            <p class="dialogheader">
                用户详情
            </p>
        </template>

        <peopleDialog :house-custom-id="houseCustomId"
                      :handle-close="peopleDialogHandleClose"
        />
    </el-dialog>
    <!-- 复审 -->
    <el-dialog v-model="recheckVisible"
               width="70%"
               :before-close="trialDialogHandleClose"
               append-to-body
               destroy-on-close
    >
        <template #header>
            <p class="dialogheader">
                审核订单（复审）
            </p>
        </template>
        <!-- 复审 -->
        <trialDialog type="1"
                     :order-details-form="orderDetailsForm"
                     :handle-close="trialDialogHandleClose"
        />
    </el-dialog>

    <!-- 订单详情 -->
    <el-dialog v-model="orderDetailsDialogVisible"
               width="80%"
               :before-close="orderDetailsDialogHandleClose"
               append-to-body
               destroy-on-close
    >
        <template #header>
            <p class="dialogheader">
                订单详情
            </p>
        </template>
        <!-- 订单详情 -->
        <orderDialog :order-details-form="orderDetailsForm"
                     :handle-close="orderDetailsDialogHandleClose"
        />
    </el-dialog>
</template>

<style scoped lang="scss">
.mx-1 {
    cursor: pointer;
}

.el-form--inline .el-form-item {
    margin-right: 0px;
    width: 20%;
    padding-left: 20px;
}
</style>
